<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN -->
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <!-- #endif -->
    <view class="form-box">
      <view class="form">
        <list-cell :hover="false">
          <view class="form-input">
            <view class="label">{{ currentLanguageTexts.recipient }}</view>
            <input
              class="input"
              :placeholder="currentLanguageTexts.inputRecipient"
              v-model="form.realName"
              placeholder-class="text-color-assist"
            />
          </view>
        </list-cell>
        <list-cell :hover="false">
          <view class="form-input">
            <view class="label">{{ currentLanguageTexts.recipientPhone }}</view>
            <view class="content__input flex align-center">
              <view
                class="content__input__pre flex align-center"
                @click="phoneRegionCodeRef.open()"
              >
                {{ phoneRegion }}
                <uv-icon
                  class="ml-10 mr-10"
                  name="arrow-down"
                  size="26"
                  color="#999"
                ></uv-icon>
              </view>
              <input
                class="input"
                :placeholder="currentLanguageTexts.inputRecipientPhone"
                v-model="form.phone"
                placeholder-class="text-color-assist"
              />
            </view>
          </view>
        </list-cell>
        <list-cell :hover="false">
          <view class="form-input">
            <view class="label">{{
              currentLanguageTexts.shippingAddress
            }}</view>
            <input
              class="input"
              :placeholder="currentLanguageTexts.selectRecipientAddress"
              v-model="form.address"
              placeholder-class="text-color-assist"
            />
            <!-- <view class="input" @click="chooseLocation">{{
              form.address
                ? form.address
                : currentLanguageTexts.selectRecipientAddress
            }}</view> -->
          </view>
        </list-cell>
        <list-cell :hover="false">
          <view class="form-input">
            <view class="label">{{ currentLanguageTexts.addressDetails }}</view>
            <input
              class="input"
              :placeholder="currentLanguageTexts.inputRecipientAddress"
              v-model="form.detail"
              placeholder-class="text-color-assist"
            />
          </view>
        </list-cell>
        <list-cell :hover="false">
          <view class="form-input">
            <view class="label">{{ currentLanguageTexts.defaultAddress }}</view>
            <uv-radio-group
              v-model="form.isDefault"
              :customStyle="{ gap: '30rpx' }"
            >
              <uv-radio :name="0">{{ currentLanguageTexts.no }}</uv-radio>
              <uv-radio :name="1">{{ currentLanguageTexts.yes }}</uv-radio>
            </uv-radio-group>
          </view>
        </list-cell>
      </view>
      <view class="btn-section">
        <uv-button
          type="primary"
          size="default"
          @tap="save"
          :custom-style="{
            borderRadius: '40rpx',
            fontWeight: 'bold',
            color: '#333',
          }"
          >{{ currentLanguageTexts.save }}</uv-button
        >
      </view>
    </view>
    <phoneRegionCode
      ref="phoneRegionCodeRef"
      @confirm="(v) => (phoneRegion = v)"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { formatDateTime, prePage } from '@/utils/util';
import { getAddressAddAndEdit } from '@/api/address';
import phoneRegionCode from '@/pages/components/phoneRegionCodePicker/index.vue';
const main = useMainStore();
const { isLogin, addresses, currentLanguageTexts } = storeToRefs(main);
const title = ref('编辑地址');

const form = ref({
  realName: '',
  isDefault: 0,
  phone: '',
  address: '',
  detail: '',
  latitude: '',
  longitude: '',
});
const phoneRegion = ref('+86');
const phoneRegionCodeRef = ref();

onLoad((option) => {
  //为了方便演示，这里用本地缓存
  console.log('option:', option);
  if (option.id) {
    form.value = addresses.value.find((item) => item.id == option.id);
  }
});

const save = async () => {
  let data = {};
  let phone = phoneRegion.value + '-' + form.value.phone;
  if (form.value.hasOwnProperty('id')) {
    data = await getAddressAddAndEdit({ ...form.value, phone });
  } else {
    data = await getAddressAddAndEdit({ ...form.value, phone });
  }
  if (data) {
    setTimeout(function () {
      uni.navigateBack();
    }, 2000);
  }
};

const chooseLocation = async () => {
  // #ifdef H5
  uni.showToast({
    title: '地图目前收费，所以演示是固定测试地址啦~',
    icon: 'none',
  });
  form.value.address = '北京市东城区东华门街道西长安街‌‌';
  form.value.latitude = '115.7';
  form.value.longitude = '39.9';
  // #endif

  // #ifdef MP-WEIXIN
  uni.chooseLocation({
    success: function (res) {
      form.value.address = res.address + ' ' + res.name;
      form.value.latitude = res.latitude;
      form.value.longitude = res.longitude;
    },
    fail: function (res1) {
      console.log('chooseLocation:', res);
    },
    complete: function (res2) {
      console.log('chooseLocation:', res2);
    },
  });

  // #endif
};
</script>

<style lang="scss" scoped>
.form-box {
  width: 100%;
  height: 100%;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  color: $text-color-base;

  .form-input {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .label {
    width: 200rpx;
    font-size: $font-size-lg;
    color: $text-color-base;
    font-weight: 500;
  }

  .input {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .radio-group {
    display: flex;
    justify-content: flex-start;

    .radio {
      padding: 10rpx 30rpx;
      border-radius: 6rpx;
      border: 2rpx solid $text-color-assist;
      color: $text-color-assist;
      font-size: $font-size-base;

      &.checked {
        background-color: $color-primary;
        color: $text-color-white;
        border: 2rpx solid $color-primary;
      }
    }
  }

  .btn-section {
    flex: 1;
    margin-top: 100rpx;
    width: 100%;
    // justify-content: center;
  }
}
</style>
